<template>
    <!-- 展示聊天界面对会话对象名字和最后发送消息的搜索结果的组件 -->
    <div class="search-item">
        <Avatar :userId="data.contactId" :showDetail="false"></Avatar>
        <div class="contact-info">
            <div class="contact-name" v-html="data.searchContactName"></div>
            <div class="last-message" v-html="data.searchLastMessage"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const props = defineProps({
    data: {
        type: Object,
        default() {
            return {};
        },
    },
});
</script>

<style lang="scss" scoped>
.search-item {
    padding: 10px;
    display: flex;
    align-items: center;

    .contact-info {
        margin-left: 10px;

        :deep(.highlight) {
            color: red;
        }

        .last-message {
            color: #999;
        }
    }

    &:hover {
        background-color: #ededed;
    }
}
</style>
